---
title: "File Trigger"
description: File Triggers are your go-to for grabbing files from the file system, acting like a digital fishing rod to hook up goodies from local or cloud storage.
order: 2
published: true
references: ["https://react-spectrum.adobe.com/react-aria/FileTrigger.html#props"]
---

## Basic
Basic usage of a FileTrigger.

<How toUse="buttons/file-trigger/file-trigger-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/file-trigger
```

## Composed components
<Composed components={['button']}/>

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```
<SourceCode toShow='file-trigger'/>

## Anatomy
```
import { FileTrigger } from "@/components/ui/file-trigger"

<FileTrigger />
```

## Folder
A FileTrigger that allows users to select a folder from the file system.

<How toUse="buttons/file-trigger/file-trigger-folder-demo" />

## Multiple
A FileTrigger that enables users to select multiple files.

<How toUse="buttons/file-trigger/file-trigger-multiple-demo" />

## Camera
A FileTrigger that lets users capture images using their device's camera.

<How toUse="buttons/file-trigger/file-trigger-camera-demo" />

## Avatar
A FileTrigger that allows users to select an avatar from their file system. It integrates components like `avatar` and `drop-zone`, enabling users to either drag and drop or manually select a file.

<Composed components={['avatar', 'drop-zone']}/>

This how you can use the FileTrigger combined with an Avatar component.
<How toUse="buttons/file-trigger/file-trigger-avatar-demo" />

## Pending
A FileTrigger can indicate a pending state using the `isPending` prop. This provides feedback for actions that take time, communicates the status to assistive technologies, and disables interactions except for focus.
<How toUse="buttons/file-trigger/file-trigger-pending-demo" />

## Circle
A FileTrigger that is styled as a circle, providing a unique visual appearance.
<How toUse="buttons/file-trigger/file-trigger-circle-demo" />

## Controlled
You can use the `onSelect` prop to snag the selected files.
<How toUse="buttons/file-trigger/file-trigger-controlled-demo" />

## Disabled
A FileTrigger that is disabled.
<How toUse="buttons/file-trigger/file-trigger-disabled-demo" />
